<template>
	<view>
		<!-- 分隔线 -->
		<divider></divider>

		<!-- 头像 -->
		<uni-list-item title="头像" :thumb="avatarUrl" :show-arrow="true" @click="changeAvatar">
			<template v-slot:right>
				<image :src="avatarUrl" style="height: 90rpx; width: 90rpx; border-radius: 50%; border: 1px solid #eee;"></image>
			</template>
		</uni-list-item>

		<!-- 姓名 -->
		<uni-list-item title="姓名" :show-arrow="true" @click="changeName">
			<template v-slot:right>
				<text>{{ name }}</text>
			</template>
		</uni-list-item>

		<!-- 性别 -->
		<uni-list-item title="性别" :show-arrow="true" @click="changeGender">
			<template v-slot:right>
				<text>{{ gender }}</text>
			</template>
		</uni-list-item>

		<!-- 生日 -->
		<uni-list-item title="生日" :show-arrow="true" @click="changeBirthday">
			<template v-slot:right>
				<text>{{ birthday }}</text>
			</template>
		</uni-list-item>

		<!-- 分隔线 -->
		<divider></divider>

		<!-- 修改密码 -->
		<uni-list-item title="修改密码" :show-arrow="true" @click="changePassword"></uni-list-item>

		<!-- 密保手机 -->
		<uni-list-item title="密保手机" :show-arrow="true" @click="changePhone">
			<template v-slot:right>
				<text>{{ phone }}</text>
			</template>
		</uni-list-item>
	</view>
</template>

<script>
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue";
	import divider from "@/components/common/divider.vue";

	export default {
		components: {
			uniListItem,
			divider
		},
		data() {
			return {
				avatarUrl: "https://via.placeholder.com/150", // 测试头像
				name: "Summer",
				gender: "女",
				birthday: "1990-01-01",
				phone: "13800138000"
			};
		},
		methods: {
			// 更换头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.avatarUrl = res.tempFilePaths[0];
					}
				});
			},
			// 修改姓名
			changeName() {
				this.showEditModal("姓名", this.name, (newValue) => {
					this.name = newValue;
				});
			},
			// 修改性别
			changeGender() {
				uni.showActionSheet({
					itemList: ["男", "女"],
					success: (res) => {
						this.gender = ["男", "女"][res.tapIndex];
					}
				});
			},
			// 修改生日
			changeBirthday() {
				this.showEditModal("生日", this.birthday, (newValue) => {
					this.birthday = newValue;
				});
			},
			// 修改密码
			changePassword() {
				uni.showToast({
					title: "修改密码",
					icon: "none"
				});
			},
			// 修改密保手机
			changePhone() {
				this.showEditModal("密保手机", this.phone, (newValue) => {
					this.phone = newValue;
				});
			},
			// 显示编辑弹窗
			showEditModal(title, defaultValue, callback) {
				uni.showModal({
					title: `编辑${title}`,
					content: defaultValue,
					editable: true,
					success: (res) => {
						if (res.confirm && res.content) {
							callback(res.content);
						}
					}
				});
			}
		}
	};
</script>

<style>
	.rounded-circle {
		border-radius: 50%;
	}

	.border-light {
		border: 1px solid #eee;
	}
</style>